<template>
    <div class="common-layout">
        <!-- 搜索抽屉 -->
        <el-drawer v-model="drawer" title="搜索" :with-header="false">
            <el-input v-model="inputgoodName" placeholder="请输入课程名/电子书名" clearable style="margin-top: 20px;" />
            <div style="margin-top: 20px;">
                <el-button type="primary" @click="find">搜索</el-button>
                <el-button style="margin-left: 30px;" @click="resetButton">重置</el-button>
            </div>
        </el-drawer>
        <el-container style="height:auto; width: 1200px;">
            <el-header class="header">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                    @select="handleSelect">
                    <el-menu-item @click="gotoindex">
                        DOOC
                    </el-menu-item>
                    <div class="flex-grow" />
                    <el-menu-item index="1" @click="gotoindex">首页</el-menu-item>
                    <el-menu-item index="2" style="width: 70px;" @click="gotoexam">

                        <a href="http://192.168.110.253:12138/">
                            <!-- <a href="http://192.168.110.253:12138/?name=" + encodeURIComponent({{userInfo.username}}) > -->
                            <div style="width: 70px;text-align: center;">
                                题库
                            </div>
                        </a>
                    </el-menu-item>
                    <el-menu-item index="3" @click="gotoebook">电子书</el-menu-item>
                    <el-menu-item index="4" @click="gocommunity">社区</el-menu-item>
                    <el-menu-item index="5" @click="gotocourse">课程</el-menu-item>

                    <div class="flex-grow" style="flex-grow: 1;" />

                    <!-- <el-button v-if="userInfo == null" @click="tologin" style="margin-top: 16px;">登录</el-button> -->


                    <!-- <el-row>
                        <el-button :icon="Search" circle style="margin-top: 50%;" @click="drawer = true" />
                    </el-row> -->

                     <el-button v-if="userInfo == null" @click="tologin" style="margin-top: 16px;">登录</el-button>
                    <el-sub-menu index="7"  v-else-if="userInfo != null">
                        <template #title>
                            <div class="block">
                                <el-avatar :size="40" :src="circleUrl" />
                            </div>
                        </template>
                        <!-- <span v-if="userInfo == null" @click="tologin" >登录</span> -->
                        
                        <el-menu-item  index="7-1" @click="gotouser">个人中心</el-menu-item>
                        <el-menu-item  index="7-2" @click="exit">退出登录</el-menu-item>

                    </el-sub-menu>
                </el-menu>
            </el-header>

            <div style="margin-top: 20px;">
                <RouterView />
            </div>
            <div class="foot">
                <p class="p">
                    <span style=" margin-right: 60px;">关于我们</span>
                    <span style=" margin-right: 60px;">人工客服</span>
                    <span style=" margin-right: 60px;">舟渡</span>
                </p>
                <p style="padding-top: 20px;text-align: center;">

                    <span style=" margin-right: 60px;">2023-10 </span>
                    <span style=" margin-right: 60px;">舟渡</span>
                </p>
            </div>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
// 从localStorage中获取存储的JSON字符串  
const userInfoJsonString = localStorage.getItem('userInfo')!;

// 解析JSON字符串为JavaScript对象  
const userInfo = JSON.parse(userInfoJsonString);

import { ref, reactive, toRefs } from 'vue'
import { Search } from '@element-plus/icons-vue'
import IndexComponent from '../components/IndexComponent.vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import axios from '../api/index';
import { el } from 'element-plus/es/locale';
import { ElMessage } from "element-plus";
const name = userInfo?.username;
// window.parent.postMessage(name, "*");
// console.log(name);


const router = useRouter();
const activeIndex = ref('1')

const islogin = ref(false)

gotoindex;

//路由==============================

function gotoindex() {
    router.push('/index')

}
function gotoexam() {
    activeIndex.value = '2'
}

function gotouser() {
    console.log(userInfoJsonString == null);
    if (userInfoJsonString == null) {
        ElMessage.error("请先登录一下下哦~~~");
        router.push("/login");
        return;
    }

    activeIndex.value = '7'

    router.push('/updateUserData')
}

function gocommunity() {
    activeIndex.value = '4'
    router.push('/postList')
}

function gotocourse() {
    activeIndex.value = '5'
    router.push('/courseList')
}

function gotoebook() {
    activeIndex.value = '3'
    router.push('/ebook')
}

function exit() {
    localStorage.removeItem('userInfo')
    localStorage.removeItem('token')
    localStorage.removeItem('longtoken')
    router.push('/login')
}

function tologin() {
    router.push("/login");
}

//===============================
const user = reactive({
    id: 1,
    avater: 'https://ts1.cn.mm.bing.net/th/id/R-C.44a04163fff09f22c9c948db14f8d35f?rik=aSLwnez5FeZbPQ&riu=http%3a%2f%2fimg.crcz.com%2fallimg%2f202003%2f26%2f1585192258111284.jpg&ehk=LIugC9N9Y1cHtTu6slaWHbg3G0bIckCFrr6qoVnOEKo%3d&risl=&pid=ImgRaw&r=0',

})

const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const state = reactive({
    circleUrl: userInfo?.avatar,
    sizeList: ['small', '', 'large'] as const,
})

const { circleUrl } = toRefs(state)


//===========搜索
const drawer = ref(false)

const inputgoodName = ref('')

//重置按钮
function resetButton() {

    inputgoodName.value = '';
}


function find() {
    axios.get('/course/findByName?courseName=' + inputgoodName)
        .then((resp) => {
            if (resp.code == 200) {

            } else {
                ElMessage.error('暂无数据！')
            }
        })
}

</script>

<style>
.flex-grow {
    flex-grow: 0;
}

.header {
    width: 100%;
}

.block {
    margin-top: -10px;
    width: 50px;
}

.foot {

    margin-top: 20px;
    height: 140px;
    background-color: rgb(29, 28, 30);
    color: white;
}

.p {
    padding-top: 20px;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid white;
}
</style>